<template>
  <div class="content">
    <div class="ssgqDiv">
      <TitleVue :name="'实时工情'" />
      <div class="contentDiv1">
        <div class="itemDiv" v-for="(item, index) in ssgqList" :key="index">
          <div class="leftDiv">
            <img :src="require('@/assets/img/common/' + item.name + '.png')" alt="" />
            <p>{{ item.name }}</p>
          </div>
          <div class="rightDiv">
            <p>{{ item.content1 }}</p>
            <div>
              <span>{{ item.content2 }}</span>
              <span>{{ item.content3 }}</span>
            </div>
          </div>
        </div>
      </div>

      <div class="contentDiv2">
        <div class="itemDiv" v-for="(item, index) in data2List" :key="index">
          <img :src="require('@/assets/img/common/' + item + '.png')" alt="" />
          <p>{{ item }}</p>
        </div>
      </div>
    </div>

    <div class="zmjkDiv">
      <TitleVue :name="'闸门监控'" />
      <div class="zmjkContent">
        <div class="itemDiv" v-for="(item, index) in zmData" :key="index">
          <div class="titleDiv">
            {{ item.name }}
          </div>
          <div class="contentDiv">
            <div class="items">
              <p>闸门开度：</p>
              <p>{{ item.zmkd }}度</p>
            </div>
            <div class="items">
              <p>瞬时流量：</p>
              <p>{{ item.ssll }}m³/s</p>
            </div>
            <div class="items">
              <p>状态：</p>
              <p>{{ item.status }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
export default {
  name: 'QthRight',
  components: {
    TitleVue
  },
  data() {
    return {
      ssgqList: [
        {
          name: '位移监测',
          content1: '表面变形位移',
          content2: '·单次变化：2mm',
          content3: '·累计变化：5mm'
        },
        {
          name: '位移监测',
          content1: '表面变形位移',
          content2: '·单次变化：2mm',
          content3: '·累计变化：5mm'
        },
        {
          name: '位移监测',
          content1: '表面变形位移',
          content2: '·单次变化：2mm',
          content3: '·累计变化：5mm'
        }
      ],
      data2List: ['渗压监测', '测压管水位'],
      zmData: [
        {
          name: '3#闸门',
          zmkd: 32,
          ssll: 6,
          status: '手动状态'
        },
        {
          name: '2#闸门',
          zmkd: 40,
          ssll: 8,
          status: '手动状态'
        },
        {
          name: '1#闸门',
          zmkd: 25,
          ssll: 5,
          status: '手动状态'
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .ssgqDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px 1vh;
    box-sizing: border-box;
    margin-bottom: 8px;
    .contentDiv1 {
      padding: 0 3vh;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .itemDiv {
        width: 100%;
        height: auto;
        display: flex;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.7vh;
        color: #c5d1df;
        .leftDiv {
          width: auto;
          margin-right: 0.5vw;
          display: flex;
          flex-direction: column;
          img {
            margin-right: 0.3vw;
          }
          p {
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 1.9vh;
            color: #ffffff;
          }
        }
        .rightDiv {
          width: auto;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          p:nth-child(1) {
            width: 80%;
            font-size: 1.9vh;
            margin-bottom: 5px;
            padding: 5px;
            color: #ffffff;
            background: linear-gradient(to right, #0565a7, transparent);
          }
          div:nth-child(2) {
            span {
              margin-right: 5px;
            }
          }
        }
      }
    }
    .contentDiv2 {
      padding: 0 3vh;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .itemDiv {
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 1.9vh;
        color: #ffffff;
        display: flex;
        align-items: center;
        img {
          margin-right: 5px;
        }
        p {
          padding: 1vh;
          box-sizing: border-box;
          background: linear-gradient(to right, #0565a7, transparent);
        }
      }
    }
  }

  .zmjkDiv {
    flex: 1;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .zmjkContent::-webkit-scrollbar {
      display: none;
    }
    .zmjkContent {
      flex: 1;
      padding: 0 1vh 0.8vh;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      .itemDiv {
        display: flex;
        flex-direction: column;
        .titleDiv {
          background: url('@/assets/img/common/zmjkTitle.png') no-repeat;
          background-size: 100% 100%;
          font-family: Source Han Sans CN;
          font-size: 1.7vh;
          color: #ffffff;
          padding-left: 1vw;
          box-sizing: border-box;
          margin-bottom: 3px;
        }
        .contentDiv {
          width: 100%;
          height: auto;
          padding: 1vh;
          box-sizing: border-box;
          background-color: rgb(18 61 101 / 50%);
          display: flex;
          flex-direction: column;
          .items {
            display: flex;
            justify-content: space-between;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 1.7vh;
            color: #ffffff;
            padding: 0 2vh 0 4vh;
            box-sizing: border-box;
          }
        }
      }
    }
  }
}
</style>
